<template>
  <div>文件导入</div>
  <input type="file" @change="handleChange" />
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="产品名称" label="产品名称" />
    <el-table-column prop="产品品牌" label="产品品牌" />
    <el-table-column prop="产品分类" label="产品分类" />
  </el-table>
</template>

<script>
import * as XLSX from "xlsx";

export default {
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    handleChange(e) {
      const file = e.target.files[0];

      // 固定写法
      const reader = new FileReader();
      reader.readAsBinaryString(file);
      reader.onload = () => {
        const workbook = XLSX.read(reader.result, { type: "binary" });
        let res = workbook.Sheets["产品列表"];
        res = XLSX.utils.sheet_to_json(res);

        console.log(res);

        this.tableData = res;
      };
    },
  },
};
</script>
